import { RadiusBottomrightOutlined } from '@ant-design/icons';
import { Input } from 'antd';
import React, { useCallback, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { NodeProps } from 'reactflow';
import { useContextSelector } from 'use-context-selector';

import { NodeInputKeyEnum } from '@/types/workflow/constant';
import { FlowNodeItemType } from '@/types/workflow/node';

import { WorkflowContext } from '../../context';

import NodeCard from './render/NodeCard';

const { TextArea } = Input;

const NodeComment = ({ data }: NodeProps<FlowNodeItemType>) => {
  const { nodeId, inputs } = data;
  const { commentText, commentSize } = useMemo(
    () => ({
      commentText: inputs.find((item) => item.key === NodeInputKeyEnum.commentText),
      commentSize: inputs.find((item) => item.key === NodeInputKeyEnum.commentSize),
    }),
    [inputs],
  );

  const onChangeNode = useContextSelector(WorkflowContext, (ctx) => ctx.onChangeNode);

  const { t } = useTranslation();
  const [size, setSize] = useState<{
    width: number;
    height: number;
  }>(commentSize?.value);

  const initialY = useRef(0);
  const initialX = useRef(0);

  const handleMouseDown = useCallback(
    (e: React.MouseEvent) => {
      initialY.current = e.clientY;
      initialX.current = e.clientX;

      const handleMouseMove = (e: MouseEvent) => {
        const deltaY = e.clientY - initialY.current;
        const deltaX = e.clientX - initialX.current;
        setSize((prevSize) => ({
          width: prevSize.width + deltaX < 120 ? 120 : prevSize.width + deltaX,
          height: prevSize.height + deltaY < 60 ? 60 : prevSize.height + deltaY,
        }));
        initialY.current = e.clientY;
        initialX.current = e.clientX;
        commentSize &&
          onChangeNode({
            nodeId,
            type: 'updateInput',
            key: NodeInputKeyEnum.commentSize,
            value: {
              ...commentSize,
              value: {
                width: size.width + deltaX,
                height: size.height + deltaY,
              },
            },
          });
      };

      const handleMouseUp = () => {
        document.removeEventListener('mousemove', handleMouseMove);
        document.removeEventListener('mouseup', handleMouseUp);
      };

      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
    },
    [commentSize, nodeId, onChangeNode, size.height, size.width],
  );

  const Render = useMemo(() => {
    return (
      <NodeCard
        selected={false}
        {...data}
        minW={`${size.width}px`}
        minH={`${size.height}px`}
        menuForbid={{
          debug: true,
        }}
        customStyle={{
          border: 'none',
          borderRadius: 'none',
          background: '#D8E9FF',
          boxShadow:
            '0px 4px 10px 0px rgba(19, 51, 107, 0.10), 0px 0px 1px 0px rgba(19, 51, 107, 0.10)',
        }}
      >
        <div className="relative h-full w-full">
          <div
            className="nodrag z-9 absolute -bottom-2 right-0 cursor-nwse-resize px-2"
            onMouseDown={handleMouseDown}
          >
            {/* <MyIcon name={'common/editor/resizer'} width={'14px'} height={'14px'} /> */}
            <RadiusBottomrightOutlined />
          </div>
          <TextArea
            value={commentText?.value}
            className="resize-none rounded-none border-none"
            style={{
              minHeight: `${size.height}px`,
              minWidth: `${size.width}px`,
            }}
            placeholder={t('enter_comment')}
            onChange={(e) => {
              commentText &&
                onChangeNode({
                  nodeId,
                  type: 'updateInput',
                  key: NodeInputKeyEnum.commentText,
                  value: {
                    ...commentText,
                    value: e.target.value,
                  },
                });
            }}
          />
        </div>
      </NodeCard>
    );
  }, [commentText, data, handleMouseDown, nodeId, onChangeNode, size.height, size.width, t]);

  return Render;
};

export default React.memo(NodeComment);
